<template>
  <a-modal
    :title="currTitle"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="closable">
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="posOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{span:4}"
        :wrapperCol="{span:20}"
        style="margin-bottom:10px"
        :validate-status="validate_status">
        <a-tooltip placement="topLeft" >
          <template slot="title">
            <span>您任职多职位，请选择当前职位</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>
        <a-select v-model="posSelected" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录职位门" style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option
            v-for="d in posList"
            :key="d.positionCode"
            :value="d.positionCode">
            {{ d.positionName }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>


  </a-modal>

</template>

<script>
  import { postAction,putAction } from '@/api/manage'
  import Vue from 'vue'
  import store from '@/store/'
  import { USER_INFO } from "@/store/mutation-types"

  export default {
    name: 'PositionSelect',
    props:{
      title:{
        type:String,
        default:"职位选择",
        required:false
      },
      closable:{
        type:Boolean,
        default:false,
        required:false
      },
      userName:{
        type:String,
        default:"",
        required:false
      }
    },
    watch:{
      userName(val){
        if(val){
          this.loadDepartList()
        }
      }
    },
    data(){
      return {
        currTitle:this.title,
        visible:false,
        posList:[],
        posSelected:"",
        validate_status:"",
        currPosName:"",
      }
    },
    created(){
      //this.loadDepartList()
    },
    methods:{
      loadposList(){
        return new Promise(resolve => {
          let url =  window._CONFIG['domianURL'] + "/cnPositionController/queryPositionByUser"
          var that = this
          postAction(url).then(res=>{
            if(res.success){
              let poses = res.result
              if(poses && poses.length>0){
                for(let i of poses){
                  if(i.mainPosition == 0){
                    that.currPosName = i.positionName
                    that.posSelected = i.positionCode
                    break
                  }
                }
              }
              this.posList  = poses
              if(this.currPosName){
                this.currTitle ="部门切换（当前部门 : "+this.currPosName+"）"
              }

            }
            resolve()
          })
        })
      },
      close(){
        this.posClear()
      },
      posOk(){
        if(!this.posSelected){
          this.validate_status='error'
          return false
        }
        let obj = {
          positionCode:this.posSelected
        }
        var that = this
        postAction( window._CONFIG['domianURL'] + "/cnPositionController/switchPosition",obj).then(res=>{
          if(res.success){
            this.$message.success("切换成功!")
            that.posClear()
            that.close()
          }
        })
      },
      show(){
        //如果组件传值userName此处就不用loadDepartList了
        this.loadposList().then(()=>{
          this.visible=true
          if(!this.posList || this.posList.length<=0){
            this.$message.warning("您尚未设置部门信息!")
            this.posClear()
          }
        })
      },
      posClear(){
        this.posList=[]
        this.posSelected=""
        this.visible=false
        this.validate_status=''
        this.currPosName=""
      },
    }

  }
</script>
<style scoped>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>